---
import { Button, buttonVariants } from "@/components/ui/Button";
import { siteConfig } from "@/config/site";
import MainLayout from "@/layouts/MainLayout.astro";
import { ExampleTabsTokenArray } from "@/components/examples/Example";
import { ctaExample } from "@/components/examples/examples";
import { cn } from "@/lib/utils";
import { Icon } from "astro-icon/components";
import HeaderSection from "@/components/HeaderSection.astro";
import { ModelCards } from "@/components/ModelCards";
import { WaitlistForm } from "@/components/forms/WaitlistForm";
import { marketingConfig } from "@/config/marketing";
---

<MainLayout title="llm-ui | React library for LLMs">
  <section class="bg-background-200 space-y-6 pb-12 pt-16 lg:py-28">
    <div
      class="container flex max-w-[64rem] flex-col items-center gap-6 text-center"
    >
      <h1
        class="font-heading text-balance text-4xl font-bold !leading-[1.1] sm:text-5xl md:text-6xl lg:text-7xl"
      >
        The <span class="text-gradient_indigo-purple">React</span> library<br />
        for
        <span class="text-gradient_indigo-purple">LLMs</span>
      </h1>

      <p
        class="text-muted-foreground mb-3 max-w-[42rem] text-balance leading-normal sm:text-xl sm:leading-8"
      >
        <span class="md:whitespace-nowrap">Renders LLM Outputs smoothly.</span>
        <span class="md:whitespace-nowrap">Removes broken markdown syntax.</span
        >
      </p>

      <div class="flex justify-center space-x-2 md:space-x-4">
        <a href="/chat" class={cn(buttonVariants({ size: "lg" }))}>Demo</a>
        <a
          href={siteConfig.links.github}
          target="_blank"
          rel="noreferrer"
          class={cn(buttonVariants({ variant: "outline", size: "lg" }), "px-4")}
        >
          <Icon name="github" class="mr-2 size-5" />
          Github
        </a>
      </div>
    </div>
  </section>

  <section id="example" class="bg-background-200 space-y-16">
    <div class="container flex min-h-[500px] max-w-[50rem] flex-col">
      <ExampleTabsTokenArray
        client:load
        tokenArray={ctaExample}
        tabs={["llm-ui", "raw"]}
        options={{ delayMultiplier: 0.4 }}
        hideFirstLoop
        throttle="low-lag"
        showSlider={false}
        showPlayPause={false}
      />
    </div>

    <div class="flex justify-center space-x-2 md:space-x-4">
      <a href="/chat" class={cn(buttonVariants({ size: "lg" }))}> Demo </a>
      <a
        href={siteConfig.links.github}
        target="_blank"
        rel="noreferrer"
        class={cn(buttonVariants({ variant: "outline", size: "lg" }), "px-4")}
      >
        <Icon name="github" class="mr-2 size-5" />
        Github
      </a>
    </div>
  </section>

  <section
    id="all-llms"
    class="bg-background-200 py-8 text-center md:py-12 lg:py-24"
  >
    <div class="container space-y-6">
      <HeaderSection
        title="Universal LLM support"
        subtitle="llm-ui operates on the model's output string, so it works with any LLM model."
      />
      <div class="mt-6">
        <ModelCards models={marketingConfig.models} />
        <Button variant="secondary" size="lg" className="mt-10 px-4">
          <a href="/docs" class="flex items-center gap-2">
            <span>Read the docs</span>
            <Icon name="lucide:arrow-up-right" class="size-4" />
          </a>
        </Button>
      </div>
    </div>
  </section>
  <section id="waitlist" class="bg-background-200 py-8 md:py-12 lg:py-24">
    <div class="container space-y-6">
      <WaitlistForm client:load />
    </div>
  </section>
</MainLayout>
